<template>
  <div class="search">
    <div class="search-box">
      <span class="left-button" v-show="showBack" @click="goBack">返回</span>
      <div class="right-input">
        <div class="input-search">
          <i class="iconfont i-icon">&#xe752;</i>
           <input type="text"  v-model.trim="searchNmae" @change="getQsearch" @input="getQsearch">
        </div>
      </div>
      <div @click="getQsearch" class="search-button">搜索</div>
    </div>
    <search-list :searchList="searchList" v-if="searchNmae !== ''"></search-list>
  </div>
</template>

<script>
import { getQsearch } from '@/network/qsearch.js'
import SearchList from './SearchList.vue'
export default {
  name: 'Search',
  data () {
    return {
      showBack: false,
      searchNmae: '',
      searchList: {},
      timeou: null
    }
  },
  components: {
    SearchList
  },
  created () {
    this.showBack = this.$route.path !== '/home'
    this.aaa = this.$route.path !== '/home'
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    // 防抖
    debounce (func, wait) {
      if (this.timeou) clearTimeout(this.timeou)
      this.timeou = setTimeout(() => {
        func.apply()
      }, wait)
    },
    getQsearch () {
      this.debounce(this.getSearchClick, 2000)
    },
    getSearchClick () {
      if (this.searchNmae === '') return
      getQsearch(this.searchNmae).then(res => {
        console.log(res)
        this.searchList = res
      })
    }
  },
  watch: {
    '$route.path': function (newVal) {
      if (newVal === '/home') {
        this.showBack = false
        console.log(this.showBack)
      } else {
        this.showBack = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box{
  z-index: 999;
  height: 41px;
  display: flex;
  background-color: #dd524d;
  .left-button{
    padding: 0px 5px;
    width: 65px;
    line-height: 41px;
    text-align: center;
    color: #fff;
  }
  .right-input{
    flex: 1;
    padding: .45rem 10px;
    background: #dd524d;
    .input-search{
      height: 30px;
      display: flex;
      background-color: #fff;
      border-radius: 2rem;
      align-items: center;
      input{
        flex: 1;
        display: block;
        height: 1.6rem;
        margin: .8rem .3rem;
        border-style: none;
      }
      .i-icon{
        width: 20px;
        display: block;
        padding-left: 8px;
      }
    }
  }
  .search-button{
    height: 40px;
    border-style: none;
    color: #fff;
    line-height: 40px;
  }
}
</style>
